<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>区域汇总分析</title>
    <script type="text/javascript" include="bootstrap,jquery,loader" src="../js/include-web.js"></script>
    <script type="text/javascript" src="../../dist/include-mapboxgl.js"></script>
    <style>
        .mb-popup {
            position: absolute;
            top: 10px;
            right: 10px;
        }
    </style>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="width: 100%;height:100%"></div>
<div id="popup" class="mb-popup" style='width: 420px'>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">区域汇总分析</h3>
        </div>
        <div class="panel-body">
            <div class="input-group">
                <span class="input-group-addon">输入数据<span title="必填字段" style="color: red;"> * </span>　　　　　</span>
                <input id="datasetName" type="text" class="form-control"
                       value="samples_processing_newyorkZone_R"/>
            </div>
            <p>
            <div class="input-group">
                <span class="input-group-addon">汇总类型<span title="必填字段" style="color: red;"> * </span>　　　　　</span>
                <div>
                    <select class="form-control" id="type" name="clientType">
                        <option value="SUMMARYMESH" selected="selected">网格面汇总</option>
                        <option value="SUMMARYREGION">多边形汇总</option>
                    </select>
                </div>
            </div>
            <p>
            <div id="meshTypeS" class="input-group">
                <span class="input-group-addon">网格面汇总类型<span title="必填字段" style="color: red;"> * </span>　　</span>
                <select class="form-control" id="meshType" name="clientType">
                    <option value="0" selected="selected">四边形网格</option>
                    <option value="1">六边形网格</option>
                </select>
            </div>
            <p>
            <div id="regionDatasetS" class="input-group">
                <span class="input-group-addon">汇总数据集<span title="必填字段" style="color: red;"> * </span>　　</span>
                <input id="regionDataset" type="text" class="form-control"
                       value="samples_processing_newyorkZone_R"/>
            </div>
            <p>
            <div class="input-group">
                <span class="input-group-addon">分析范围　　　　　</span>
                <input id="query" type="text" class="form-control" value="-74.050,40.650,-73.850,40.850"/>
            </div>
            <p>
            <p>
            <div class="input-group">
                <span class="input-group-addon">以标准属性字段统计</span>
                <span class="form-control">
                    <input id="standardSummaryFields" type="checkbox">
                </span>
                <span class="input-group-addon">以权重字段统计　</span>
                <span class="form-control">
                    <input id="weightedSummaryFields" type="checkbox">
                </span>
            </div>
            <p>
                <div id="standardS" style="display: none">
                    <div class="input-group">
                        <span class="input-group-addon">属性字段统计模式<span title="必填字段"
                                                                      style="color: red;"> * </span>　</span>
                        <input id="standardStatisticModes" type="text" class="form-control"
                               value="max"/>
                    </div>
            <p>
            <div class="input-group">
                <span class="input-group-addon">属性字段名<span title="必填字段" style="color: red;"> * </span>　　　　</span>
                <input id="standardFields" type="text" class="form-control"
                       value="LocationID"/>
            </div>
            <p>
        </div>
        <div id="weightS" style="display: none">
            <div class="input-group">
                <span class="input-group-addon">权重字段统计模式<span title="必填字段" style="color: red;"> * </span>　</span>
                <input id="weightedStatisticModes" type="text" class="form-control"
                       value="max"/>
            </div>
            <p>
            <div class="input-group">
                <span class="input-group-addon">权重字段名<span title="必填字段" style="color: red;"> * </span>　　　　</span>
                <input id="weightedFields" type="text" class="form-control"
                       value="LocationID"/>
            </div>
            <p>
        </div>

        <div id="resolutionS" class="input-group">
            <span class="input-group-addon">网格大小　　　　　</span>
            <input id="resolution" type="text" class="form-control" value="100"/>
        </div>
        <p>
        <div id="meshSizeUnitS" class="input-group">
            <span class="input-group-addon">网格大小单位　　　</span>
            <select class="form-control" id="meshSizeUnit" name="clientType">
                <option value="Meter" selected="selected">Meter</option>
                <option value="Kilometer">Kilometer</option>
                <option value="Yard">Yard</option>
                <option value="Foot">Foot</option>
                <option value="Mile">Mile</option>
            </select>
        </div>
        <p>
        <div class="input-group">
            <span class="input-group-addon">是否统计长度或面积</span>
            <span class="form-control">
                    <input id="sumShape" type="checkbox" checked>
                </span>
        </div>
        <p>
        <div align="right">
            <input type="button" id='btn' class="btn btn-primary" value="创建"/>
        </div>
    </div>
</div>
</div>
<script>
    var map,
        baseUrl = (window.isLocal ? document.location.protocol + "//" + document.location.host : "http://117.122.248.69:8090") + "/iserver/services/map-world/rest/maps/World",
        mapUrl = baseUrl + "/zxyTileImage.png?z={z}&x={x}&y={y}",
        processingsUrl = (window.isLocal ? document.location.protocol + "//" + document.location.host : "http://117.122.248.69:8090") + "/iserver/services/distributedanalyst/rest/v1/jobs",
        token = 'yurnlSeWak-vh77nAh73yrW_cHDTDJrfZxCVl7-h3GhMSMSNTPjvH7ykQviXfH1tOQ2ckJtUt6J9RY32GFNa6Q..';
    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
        "| Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> " +
        " with <span>© <a href='http://iclient.supermapol.com' target='_blank'>SuperMap iClient</a></span>";

    map = new mapboxgl.Map({
        container: 'map',
        style: {
            "version": 8,
            "sources": {
                "raster-tiles": {
                    "attribution": attribution,
                    "type": "raster",
                    "tiles": [mapUrl],
                    "tileSize": 256
                }
            },
            "layers": [{
                "id": "simple-tiles",
                "type": "raster",
                "source": "raster-tiles",
            }]
        },
        center: [-73.95, 40.75],
        zoom: 10
    });
    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');

    $("#standardSummaryFields").change(function (e) {
        if (e.target.checked) {
            $("#standardS").show();
            return;
        }
        $("#standardS").hide();
    });
    $("#weightedSummaryFields").change(function (e) {
        if (e.target.checked) {
            $("#weightS").show();
            return;
        }
        $("#weightS").hide();
    });
    $("#type").change(function (e) {
        if (e.target.selectedIndex === 0) {
            $("#meshTypeS").show();
            $("#resolutionS").show();
            $("#meshSizeUnitS").show();
            $("#regionDatasetS").hide();
            return;
        }
        $("#meshTypeS").hide();
        $("#resolutionS").hide();
        $("#meshSizeUnitS").hide();
        $("#regionDatasetS").show();
    });

    if (!window.isLocal) {
        SuperMap.SecurityManager.registerToken('http://117.122.248.69:8090/iserver', token);
    }
    var processingService = new mapboxgl.supermap.ProcessingService(processingsUrl);

    function getQuery() {
        if ($('#query').val() === "") {
            return "";
        }
        var query = [];
        $('#query').val().split(',').map(function (el) {
            query.push(parseFloat(el));
        });
        var sw = new mapboxgl.LngLat(query[0], query[1]);
        var ne = new mapboxgl.LngLat(query[2], query[3]);

        return new mapboxgl.LngLatBounds(sw, ne);
    }

    $('#btn').on('click', function () {
        if ($('#msg_container')[0]) {
            $('#msg_container').remove();
        }
        showLoader();
        if (map.getLayer("summaryLayer")) {
            map.removeLayer("summaryLayer");
        }
        var summaryRegionJobParameter = new SuperMap.SummaryRegionJobParameter({
            datasetName: $('#datasetName').val(),
            regionDataset: $('#regionDataset').val(),
            type: $('#type option:selected').attr('value'),
            meshType: $('#meshType option:selected').attr('value'),
            query: getQuery(),
            standardSummaryFields: $('#standardSummaryFields').get(0).checked,
            weightedSummaryFields: $('#weightedSummaryFields').get(0).checked,
            standardStatisticModes: $('#standardStatisticModes').val(),
            standardFields: $('#standardFields').val(),
            weightedStatisticModes: $('#weightedStatisticModes').val(),
            weightedFields: $('#weightedFields').val(),
            resolution: $('#resolution').val(),
            meshSizeUnit: $('#meshSizeUnit option:selected').attr('value'),
            sumShape: $('#sumShape').get(0).checked
        });
        processingService.addSummaryRegionJob(summaryRegionJobParameter, function (serviceResult) {
            if (serviceResult.error) {
                removeLoader();
                var errorMsg = serviceResult.error.errorMsg || "code: " + serviceResult.error.code;
                showAlert("创建失败!<br>" + errorMsg, false);
                return;
            }
            serviceResult.result.setting.serviceInfo.targetServiceInfos.map(function (info) {
                if (info.serviceType === 'RESTMAP') {
                    SuperMap.FetchRequest.get(info.serviceAddress + '/maps').then(function (response) {
                        return response.json();
                    }).then(function (result) {
                        var mapUrl = result[0].path + "/zxyTileImage.png?z={z}&x={x}&y={y}&width=256&height=256&transparent=true";
                        map.addSource("summaryData", {
                            "type": "raster",
                            "tiles": [mapUrl],
                            "tileSize": 256
                        });
                        map.addLayer({
                            "id": "summaryLayer",
                            "type": "raster",
                            "source": "summaryData",
                            "minzoom": 0,
                            "maxzoom": 22
                        });

                        removeLoader();
                    });
                }
            });
        });
    });

    function showAlert(msg, state) {
        var className = "alert-";
        className += state ? "success" : "danger";
        if (!$('#msg_container')[0]) {
            var alertDiv = $("<div class='alert alert-dismissible' id='msg_container' role='alert' " +
                "style='z-index:800;position: absolute;top: 20px;margin:auto;left: 40%;width:400px;display: none'>" +
                "<button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>&times;</span></button>" +
                "<strong><p id='msg'></p></strong></div>");
            $('body').append(alertDiv)
        }
        $('#msg_container').addClass(className);
        $('#msg_container').slideDown(300);
        $('#msg').html(msg);
    }
</script>
</body>
</html>